<template>
  <div class="songList">
    <el-table :data="list" size="mini" stripe fit style="width: 100%;" @row-dblclick="playMusicList">
      <el-table-column type="index" width="60" align="center"></el-table-column>
      <el-table-column label="操作" width="80" align="center">
        <template slot-scope>
          <a @click.prevent.stop="addCollect">
            <i class="iconfont icon-icon-test" v-show="isShow"></i>
            <i class="iconfont icon-collectselected" style="color:#bd0000;" v-show="!isShow"></i>
          </a>
          <i class="iconfont icon-download"></i>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="音乐标题"></el-table-column>
      <el-table-column prop="ar[0].name" label="歌手" width="150"></el-table-column>
      <el-table-column prop="al.name" label="专辑"></el-table-column>
      <el-table-column prop="dt" label="时长" width="90"></el-table-column>
      <!-- <el-table-column label="热度"></el-table-column> -->
    </el-table>
  </div>
</template>

<script>
import { getMusicUrl, getMusicMenu } from '../../../network/swiper.js'
// import { timeFormat } from '../../common/util.js'
export default {
  props: ['list'],
  data () {
    return {
      isShow: true,
      musiclistIds: [],
      num: 0
    }
  },
  methods: {
    // 获取播放地址
    getMusicUrl (id) {
      getMusicUrl(id).then((res) => {
        // console.log(res.data)
        if (res.data.data) {
          this.$store.commit('getNowMusic', res.data.data[0].url)
        }
      })
    },
    // 获取歌曲信息
    getMusicMenu (id) {
      getMusicMenu(id).then((res) => {
        // console.log(res.data)
        if (res.data) {
          this.$store.commit('getnowMusicMenu', res.data.songs[0])
        }
      })
    },
    // 播放音乐
    playMusicList (row) {
      // console.log(row.id)
      if (row.id === null) return
      this.getMusicUrl(row.id)
      this.getMusicMenu(row.id)
      this.$store.commit('musicListIds', this.musiclistIds)
      this.$store.commit('musicIndex', row.num)
      this.$store.commit('setMusicCount', this.musiclistIds.length)
    },
    // 添加收藏
    addCollect () {
      this.isShow = !this.isShow
    }
  },
  created () {
    this.list.forEach(item => {
      item.num = this.num++
      this.musiclistIds.push(item.id)
    })
  }
}
</script>

<style>
  .songList .has-gutter {
    font-size: 16px;
  }
  .el-table__row {
    font-size: 14px;
  }
  .icon-icon-test {
    /* color: #bc0000; */
  }
  .el-pagination {
    margin: 10px auto 0;
    text-align: center;
  }
</style>
